import React from "react";
import GeekIcon from "@shared/geekIcon";
import { useNavigate } from "react-router-dom";
import { useTypedDispatch } from "@store/index";
import { addKey } from "@slice/searchKey";

interface Props {
    item: { origin: string; name: string };
}

interface Props {
    item: { origin: string; name: string };
}

export default function SuggestionItem({ item }: Props) {

    // 获取用于页面跳转的方法
    const navigate = useNavigate();
    // 获取 dispatch 方法
    const dispatch = useTypedDispatch();
    // 当点击联想关键词时执行的方法
    const search = () => {
        // 将联想关键字保存到搜索历史记录列表中
        dispatch(addKey({ name: item.origin }));
        // 跳转到搜索结果页面
        navigate(`/result/${item.origin}`);
    };

    return (
        <li onClick={search}>
            <GeekIcon type={"iconbtn_search"} />
            <div dangerouslySetInnerHTML={{ __html: item.name }}></div>
        </li>
    );
}